<template>
  <div>
      <header-cmp>
          <span>注册</span>
      </header-cmp>
      <div class="zt">
        <div class="phone">
          <input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*"/>
        </div>
        <div class="yzm">
          <input type="text" v-model="code" placeholder="请输入验证码" pattern="[0-9]*"/>
          <button :disabled="disabled" @click="sendCode"><span>{{text}}</span></button>
        </div> 
        <div class="phone">
            <input type="text" v-model="pwd" placeholder="请设置密码" pattern="[0-9]*"/>
        </div>
        <div class="login" @click="login"><span>注 册</span></div>
        <div>注册即为同意本协议<a href="#" style="color:red">《服务协议》</a></div>
      </div>
  </div>
</template>

<script>
import HeaderCmp from '../components/HeaderCmp.vue'
import { Toast } from 'mint-ui';
import axios from 'axios'
export default {
    data(){
        return{
            userTel:'',
            disabled:false,
            rules:{
            //手机号验证规则
                userTel:{
                    rule:/^1[23456789]\d{9}$/,
                    msg:'手机号不能为空，并且是11位数字'
                },
                pwd:{
                rule:/^\w{6,12}$/,
                msg:'密码不能为空，请输入6-12位字符'
            }
            },
            time:60,
            text:'获取短信验证码',
            data:'',
            code:'',
            pwd:''
        }
    },
    components:{
        HeaderCmp

    },
    methods:{
        sendCode(){
        if(this.validate('userTel')) return
        //请求短信验证码
        axios({
            url:"/ajax/code",
            method:'POST',
            data:{
                phone:this.userTel,
            }
        }).then(({data})=>{
            console.log(data.data)
            this.data=data.data
        }).catch(err=>{
            console.log(err)
        })
        this.disabled=true
        let timer=setInterval(()=>{
            --this.time
            this.text=`重新发送${this.time}`
        },1000)
        setTimeout(()=>{
            clearInterval(timer)
            this.time=60;
            this.disabled=false;
            this.text='获取短信验证码'
        },60000)
        },
        validate(key){
        if(!this.rules[key].rule.test(this[key])){
            Toast(this.rules[key].msg)
            return true
        }
        },
        login(){
            if(this.validate('userTel')) return
            console.log(this.data)
            if(this.data === ''){
                Toast('请获取验证码')
                return
            }
            let data=this.data.toString()
            if(data !== this.code){
                Toast('验证码不正确')
                return
            }
            //手机验证码注册登录一体化，验证码正确就发送请求
            axios({
            url:"/ajax/reg",
            method:'POST',
            data:{
                phone:this.userTel,
                pwd:this.pwd
            }
            }).then(({data})=>{
                data.user === 0 ? Toast('你已经有账户了,将为你自动登录') : Toast('注册成功,将为你自动登录')
            }).catch(err=>{
            console.log(err)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.phone{
  width: 85%;
  height: 30px;
  input{
    width: 100%;
    height: 30px;
  }
}
.yzm{
      display: flex;
  width: 85%;
  height: 30px;
      margin-top: 5%;
    margin-bottom: 5%;
  input{
    width: 68%;
    height: 30px;
  }
  button{
    width:32%;
    height: 30px;
    background-color: red;
    border-radius: 10px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
  }
}
.login{
  margin-top:3%;
  width: 85%;
  height: 30px;
  background-color: red;
  border-radius: 10px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
}
.zt{
    margin-left: 10%;
    margin-top: 5%;
}
</style>